<template>
	<view class="bg">
		<view class="top">
			<view class="circle1"></view>
			<view class="circle2"></view>
			<view class="circle3"></view>
			<view class="line">
				<img :src="logo" class="img-logo" />
				<text>中国{{operatorName}}</text>
			</view>
			<view class="number">{{cardNumber}}</view>
		</view>
		<!-- 选择统计单位 -->
		<view class="choose">
			<view style="text-align: right;"><text style="font-size: 28upx;color: #555;float: right;">单位(GB)</text></view>
		</view>
		<!-- 统计图表 -->
		<view class="bord">
			<view class="bord-item" v-for="(item,index) in dataMonth" :key="index">
				<view class="date"><text style="transform: scale(0.5);">{{item.flow}}</text></view>
				<view class="percente" :style="{'height':item.height}"></view>
				<view class="date"><text v-if='index%2==0' style="transform: scale(0.7);">{{item.date}}</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				operatorName: '',		//运营商
				cardId: '',				
				cardNumber: '',
				logo: '',
				index: 0,
				dataMonth: [],
			}
		},
		onLoad(option){
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		　　		WeixinJSBridge.invoke('setFontSizeCallback', {
			　　		'fontSize': 0
			　　});
			　　// 重写设置网页字体大小的事件
			　　WeixinJSBridge.on('menu:setfont', function () {
			　　　　WeixinJSBridge.invoke('setFontSizeCallback', {
			　　　　　　'fontSize': 0
			　　　　});
			　　});
			};
			this.operatorName = option.operatorName;
			this.cardNumber = option.cardNumber;
			this.cardId = option.cardId;
			if(this.operatorName=='电信'){
				this.logo = '../../static/img/dx.svg';
			}
			if(this.operatorName=='移动'){
				this.logo = '../../static/img/yd.svg';
			}
			if(this.operatorName=='联通'){
				this.logo = '../../static/img/lt.svg';
			}
			this.initData();
		},
		onPullDownRefresh() {
			this.initData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			initData(){
				this.dataMonth=[
					{ date: '--月', flow: '0', height: '0.1vw' },
					{ date: '--月', flow: '0', height: '0.1vw' },
					{ date: '--月', flow: '0', height: '0.1vw' },
					{ date: '--月', flow: '0', height: '0.1vw' },
					{ date: '--月', flow: '0', height: '0.1vw' },
					{ date: '--月', flow: '0', height: '0.1vw' },
					{ date: '--月', flow: '0', height: '0.1vw' },
					{ date: '--月', flow: '0', height: '0.1vw' },
					{ date: '--月', flow: '0', height: '0.1vw' },
					{ date: '--月', flow: '0', height: '0.1vw' },
					{ date: '--月', flow: '0', height: '0.1vw' },
					{ date: '--月', flow: '0', height: '0.1vw' }
				];
				//按月统计用量
				this.$req.userData('/card-flow/getFlow', {
					id:this.cardId,
					dateType:'MONTH',
				}).then(v=>{
					let max = 0;
					if(v.data.dateList&&v.data.flowList){
						for(let item of v.data.flowList){
							if(item/1024>0&&item/1024>max){
								max = (item/1024).toFixed(2);
							}
						}
						this.dataMonth.forEach((item,i)=>{
							let d = v.data.dateList[i];
							item.date = d.substring(5,7)+'月';
							item.flow = v.data.flowList[i]/1024;
							item.flow = item.flow>0?item.flow.toFixed(2):0;
							if(item.flow>0&&max>0){
								if(item.flow==max){
									item.height = '30vw';
								}
								if(item.flow<max){
									item.height = (30 * item.flow / max).toFixed(2) + 'vw';
								}
							}
						})
					}
				})
			},
		}
	}
</script>

<style>
	.bg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: linear-gradient(to top, #fdfbfb 0%, white 100%);
	}
	.top{
		width: 90%;
		height: 300upx;
		position: relative;
		top: 0;
		left: 0;
		border-radius: 10upx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		margin: 5vw;
		overflow: hidden;
	}
	.circle1{
		width: 220upx;
		height: 220upx;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 50%;
		background-image: linear-gradient(120deg, #A0C6FF 0%, #408CFF 100%);
		margin: -80upx;
	}
	.circle2{
		width: 60upx;
		height: 60upx;
		position: absolute;
		bottom: 0;
		right: 0;
		border-radius: 50%;
		background-image: linear-gradient(120deg, #A0C6FF 0%, #408CFF 100%);
		margin: -20upx;
	}
	.circle3{
		width: 40upx;
		height: 40upx;
		position: absolute;
		top: 30%;
		right: 25%;
		border-radius: 50%;
		background-image: linear-gradient(120deg, #A0C6FF 0%, #408CFF 100%);
	}
	.line{
		width: 90%;
		height: 80upx;
		position: relative;
		top: 70upx;
		left: 5%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.img-logo{
		width: auto;
		height: 50upx;
		margin-right: 5px;
	}
	.number{
		width: 90%;
		height: 80upx;
		position: relative;
		top: 70upx;
		left: 5%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.choose{
		width: 90%;
		height: 40upx;
		position: relative;
		top: 0;
		left: 5%;
		/* display: flex;
		justify-content: space-between;
		align-items: center; */
		text-align: right;
	}
	.unit{
		width: 200upx;
		height: 50upx;
		position: relative;
		display: inline-flex;
		justify-content: flex-start;
		align-items: center;
		border-radius: 5px;
		background-color: white;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		font-size: 28upx;
		overflow: hidden;
	}
	.btn-item{
		width: 100upx;
		height: 50upx;
		position: relative;
		text-align: center;
		line-height: 50upx;
	}
	
	.btn-select{
		background-image: linear-gradient(to bottom, #A0C6FF 0%, #408CFF 100%);
		color: #fff;
		}
	.btn-unselect{
		color: #777;
		background-image: linear-gradient(to bottom, #FFFFFF 0%, #F2F2F2 100%);
	}
	.num{
		width: auto;
		height: 50upx;
		position: relative;
	}
	.uni-select{
		width: 80px;
		height: 50upx;
		position: relative;
		border: 1px solid #e6e6e6;
		border-radius: 3px;
		text-align: center;
		font-size: 28upx;
		color: #555;
		line-height: 50upx;
		letter-spacing: 1px;
	}
	.xiala{
		color: #e6e6e6;
		font-size: 30upx;
		position: absolute;
		right: 5px;
		top: 0;
		line-height: 55upx;
	}
	.bord{
		width: 86%;
		height: 45vw;
		position: relative;
		top: 0;
		left: 0;
		margin: 5vw;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		background-image: linear-gradient(120deg, rgba(244, 252, 255, 0.7) 0%, rgba(244, 250, 255,0.7) 100%);
		padding: 2vw;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-end;
	}
	.bord-item{
		min-width: 6vw;
		max-width: 25vw;
		height: auto;
		position: relative;
		font-size: 20upx;
		color: #555;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.percente{
		width: 12upx;
		position: relative;
		background-image: linear-gradient(to top, #3477DC 0%, #408CFF 1%, #408CFF 100%);
		border-radius: 10upx;
		display: inline-flex;
	}
	.date{
		width: 100%;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
	}
	
</style>
